<template>
  <div class="table-wrapper">
    <div class="search-container">
      <div class="search-wrapper">
        <span class="label">乘车人姓名：</span>
        <el-input v-model="params.fullname" size="mini" class="common-input" placeholder="请输入姓名"></el-input>
      </div>
      <div class="search-wrapper">
        <span class="label">学工号：</span>
        <el-input v-model="params.badge_number" size="mini" class="common-input" placeholder="请输入学工号"></el-input>
      </div>
      <div class="search-wrapper">
        <span class="label">开始时间：</span>
        <el-date-picker
          size="mini"
          v-model="params.start_time"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择开始时间"
        >
        </el-date-picker>
      </div>
      <div class="search-wrapper">
        <span class="label">结束时间：</span>
        <el-date-picker
          size="mini"
          v-model="params.end_time"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择结束时间"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="search-container">
      <div class="search-wrapper">
        <span class="label">订单状态：</span>
        <el-select size="mini" v-model="params.order_status" placeholder="订单状态">
          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.val"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper">
        <el-button @click="search" icon="el-icon-search" size="mini" >查询</el-button>
      </div>
    </div>
    <el-table
      :data="data"
      border
      class="custom-table"
      style="width: 100%">
      <el-table-column
        prop="vehicle_name"
        label="线路名称">
      </el-table-column>
      <el-table-column
        prop="shuttle_type"
        label="班车类型"
        width="100">
      </el-table-column>
      <el-table-column
        prop="fullname"
        label="乘车人">
      </el-table-column>
      <el-table-column
        prop="ride_date"
        label="乘车时间">
      </el-table-column>
      <el-table-column
        prop="seat_number"
        label="座位号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="order_status"
        label="订单状态"
        width="100">
      </el-table-column>
      <el-table-column
        prop="payamount"
        label="支付金额"
        width="100">
      </el-table-column>
      <el-table-column
        prop="paytime"
        label="支付时间">
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :current-page="params.page"
      :page-size="15"
      :pager-count="5"
      @current-change="changePage"
      :total="params.total">
    </el-pagination>
  </div>
</template>

<script>
import portal from '@/api/portal'

export default {
  name: 'BusTable',
  data () {
    return {
      params: {
        page: 1,
        total: 0,
        fullname: null,
        badge_number: null,
        start_time: null,
        end_time: null,
        order_status: null
      },
      statusList: [],
      data: []
    }
  },
  created () {
    this.getBusStatus()
    this.getBusOrder()
  },
  computed: {
  },
  mounted () {
  },
  methods: {
    search () {
      this.params.page = 1
      this.getBusOrder()
    },
    async getBusStatus () {
      const result = await portal.getBusStatus()
      if (result.data) {
        this.statusList = result.data
      }
    },
    async getBusOrder () {
      this.loading = true
      const result = await portal.getBusOrder(this.params)
      if (result.data) {
        this.data = result.data.list
        this.params.total = result.data.total
        this.loading = false
      }
    },
    changePage (val) {
      this.params.page = val
      this.getBusOrder()
    }
  }
}
</script>

<style scoped lang="scss">

</style>
